<template>
  <div>
    <film-swiper>
      <div class="swiper-slide" v-for="(item,index) in imgList" :key="index">
        <!--<img :src="item">-->
        <div :style="{backgroundImage:'url('+item+')'}" style="height: 200px;background-size: cover"></div>
      </div>
    </film-swiper>
    <!-- 选项卡 -->
    <!-- 只有在vue中，组件上写的class，style会自动传到组件的根节点上 -->
    <film-header style="top: -2px;position: sticky"></film-header>
    <router-view></router-view>
  </div>
</template>

<script>
import filmHeader from './Film/FilmHeader'
import filmSwiper from "./Film/FilmSwiper";

export default {
  data() {
    return {
      /*imgList: ['https://pic.maizuo.com/usr/movie/4a2bec5290b94f7eb597913727b21df6.jpg',
        'https://pic.maizuo.com/usr/movie/856d94de8d1e019778ba7720eebeb198.jpg',
        'https://pic.maizuo.com/usr/movie/c14a70858e2bda9c2bc8eaa7bfa0e2aa.jpg'
      ]*/
      imgList: []
    }
  },
  components: {
    filmHeader,
    filmSwiper,
  },
  mounted() {
    //通过bus方式获取到兄弟组件请求的数据
    let that = this //在此处this才是指向当前组件对象
    this.bus.$on("myswiper", function (swiper) {
      for (let i = 0; i < swiper.length; i++) {
        that.imgList.push(swiper[i])
      }
      //that.imgList = swiper
      //console.log(that.imgList)
    })
  }
}
</script>

<style lang="less" scoped>

</style>>
